<template>
  <div class="patient">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>
            <!-- 0自费  1医保-->
            <el-tag> {{ item.isInsure ? "医保" : "自费" }}</el-tag>
            {{ item.name }}
          </span>
          <div>
            <el-button type="primary" :icon="Edit" circle @click="handler" />
            <el-popconfirm title="确定删除？" @confirm="deleteUser">
              <template #reference>
                <el-button
                  type="danger"
                  :icon="Delete"
                  circle
                  v-if="$route.path == '/user/patient'"
                />
              </template>
            </el-popconfirm>
          </div>
        </div>
      </template>
      <div>
        证件类型: <span>{{ item.param.certificatesTypeString }}</span>
      </div>
      <div>
        证件号码: <span>{{ item.certificatesNo }}</span>
      </div>
      <div>
        <!-- 0女 1男 -->
        用户性别: <span>{{ item.sex ? "男" : "女" }}</span>
      </div>
      <div>
        出生日期: <span>{{ item.birthdate }}</span>
      </div>
      <div>
        手机号码: <span>{{ item.phone }}</span>
      </div>
      <div>
        <!-- 0未婚 1已婚 -->
        婚姻状况: <span>{{ item.isMarry ? "已婚" : "未婚" }}</span>
      </div>
      <div>
        当前地址: <span>{{ item.param.cityString || "--" }}</span>
      </div>
      <div>
        详细地址: <span>{{ item.param.fullAddress }}</span>
      </div>
      <transition name="confirm">
        <div class="confirm" v-if="index === currentIndex">
          <span>已选择</span>
        </div>
      </transition>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { Edit, Delete } from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
import { reqRemoveUser } from "@/api/user/index.ts";
import { ElMessage } from "element-plus";
let props = defineProps(["item", "index", "currentIndex"]);
let $emit = defineEmits(["change", "remove"]);
let $route = useRoute();
let $router = useRouter();
// 就诊人组件 修改按钮的回调
const handler = () => {
  if ($route.query == "/user/patient") {
    $emit("change", props.item);
  } else {
    // 路由跳转携带参数
    $router.push({
      path: "/user/patient",
      query: {
        type: "edit",
        id: props.item.id,
      },
    });
  }
};
// 删除用户
const deleteUser = async () => {
  try {
    await reqRemoveUser(props.item.id);
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    $emit("remove");
  } catch (error) {
    ElMessage({
      type: "error",
      message: "删除失败",
    });
  }
};
</script>

<style scoped lang="scss">
.patient {
  width: 30%;
  margin-bottom: 5px;
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  ::v-deep(.el-card__body) {
    position: relative;
    cursor: pointer;
    .confirm {
      border: 1px dashed #409eff;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      // top: 10%;
      // left: 17%;
      // transform: translate(-50%, -50%);
      width: 200px;
      height: 200px;
      border-radius: 100%;
      text-align: center;
      line-height: 200px;
      opacity: 0.5;
      span {
        display: block;
        color: #409eff;
        font-size: 24px;
        transform: rotate(45deg);
      }
    }
    .confirm-enter-from {
      transform: scale(1);
    }
    .confirm-enter-active {
      transition: all 0.3s;
    }
    .confirm-enter-to {
      transform: scale(1.2);
    }
  }
  ::v-deep(.el-card__body div) {
    font-size: 16px;
    margin-bottom: 10px;
    span {
      color: #7f7f7f;
    }
  }
}
</style>
